import React, { useState } from "react";

/**
 * 浅色简约版扫描结果详情页
 * - 结构、逻辑与之前深色 ScanResultDetailPage 完全一致
 * - 只调整 Tailwind 样式为白底简约高级风
 */

type IssueLevel = "critical" | "warning" | "info";

type ConfirmStatus = "unconfirmed" | "confirmed";
type ConfirmType = "problem" | "falsePositive" | "fixed" | "known";

interface Issue {
  id: string;
  level: IssueLevel;
  ruleName: string;
  filePath: string;
  line: number;
  description: string;
  apiName?: string;
  interfaceType?: string;
  mismatchType?: string;
  suggestion?: string;
  confirmStatus: ConfirmStatus;
  confirmType?: ConfirmType;
  inheritedFrom?: {
    scanId: string;
    time: string;
    branch: string;
  };
  codeSnippet?: string;
  confirmHistory: {
    time: string;
    user: string;
    action: "confirm" | "modify" | "revoke";
    type?: ConfirmType;
    comment?: string;
    fromType?: ConfirmType;
    toType?: ConfirmType;
  }[];
}

const MOCK_ISSUES: Issue[] = [
  {
    id: "Q-20240401-0001",
    level: "critical",
    ruleName: "API 命名不规范",
    filePath: "/src/api/user/profile.ts",
    line: 128,
    description: "API 名称未遵循驼峰命名规范，建议统一为 getUserProfile",
    apiName: "get_user_profile",
    interfaceType: "REST-GET",
    mismatchType: "命名规范不一致",
    suggestion: "统一重命名为 getUserProfile，并更新调用方",
    confirmStatus: "confirmed",
    confirmType: "fixed",
    inheritedFrom: {
      scanId: "SR-20240301-0012",
      time: "2024-03-01 11:20",
      branch: "master",
    },
    codeSnippet: `export async function get_user_profile(id: string) {
  return http.get(\`/api/user/\${id}/profile\`);
}`,
    confirmHistory: [
      {
        time: "2024-03-01 11:30",
        user: "张三",
        action: "confirm",
        type: "problem",
        comment: "确认为命名问题，计划在下个版本修复。",
      },
      {
        time: "2024-03-15 10:05",
        user: "李四",
        action: "modify",
        fromType: "problem",
        toType: "fixed",
        comment: "已完成接口重命名及调用方替换。",
      },
    ],
  },
  {
    id: "Q-20240401-0002",
    level: "warning",
    ruleName: "接口文档不一致",
    filePath: "/src/api/order/list.ts",
    line: 42,
    description: "返回字段 orderStatus 在文档描述与实际实现不一致。",
    apiName: "fetchOrderList",
    interfaceType: "REST-GET",
    mismatchType: "文档与实现不一致",
    suggestion: "统一以实现为准，修正文档说明。",
    confirmStatus: "unconfirmed",
    confirmHistory: [],
  },
  {
    id: "Q-20240401-0003",
    level: "info",
    ruleName: "建议添加错误码说明",
    filePath: "/src/api/common/error.ts",
    line: 10,
    description: "接口缺少错误码枚举的规范说明。",
    apiName: "getErrorCodeMeta",
    interfaceType: "REST-GET",
    mismatchType: "文档缺失",
    suggestion: "补充错误码说明文档。",
    confirmStatus: "confirmed",
    confirmType: "known",
    confirmHistory: [
      {
        time: "2024-04-01 14:12",
        user: "王五",
        action: "confirm",
        type: "known",
        comment: "已知问题，暂不处理，后续统一补充。",
      },
    ],
  },
];

const levelConfig: Record<
  IssueLevel,
  { label: string; badgeClass: string; dotClass: string }
> = {
  critical: {
    label: "严重",
    badgeClass: "bg-red-50 text-red-600 border border-red-200",
    dotClass: "bg-red-500",
  },
  warning: {
    label: "警告",
    badgeClass: "bg-amber-50 text-amber-600 border border-amber-200",
    dotClass: "bg-amber-500",
  },
  info: {
    label: "提示",
    badgeClass: "bg-sky-50 text-sky-600 border border-sky-200",
    dotClass: "bg-sky-500",
  },
};

const confirmTypeLabel: Record<ConfirmType, string> = {
  problem: "确认为问题",
  falsePositive: "确认为误报",
  fixed: "确认为已修复",
  known: "确认为已知问题",
};

const confirmTypeTagClass: Record<ConfirmType, string> = {
  problem: "bg-rose-50 text-rose-600 border border-rose-200",
  falsePositive: "bg-emerald-50 text-emerald-600 border border-emerald-200",
  fixed: "bg-indigo-50 text-indigo-600 border border-indigo-200",
  known: "bg-slate-50 text-slate-600 border border-slate-200",
};

const GlassCard: React.FC<{
  className?: string;
  children: React.ReactNode;
}> = ({ className = "", children }) => (
  <div
    className={
      "rounded-2xl border border-slate-200/80 bg-white/90 backdrop-blur " +
      "shadow-[0_14px_30px_rgba(15,23,42,0.04)] transition " +
      "hover:bg-white " +
      className
    }
  >
    {children}
  </div>
);

const ScanResultDetailPage: React.FC = () => {
  const [selectedIssue, setSelectedIssue] = useState<Issue | null>(
    MOCK_ISSUES[0]
  );
  const [drawerOpen, setDrawerOpen] = useState(true);
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const [levelFilter, setLevelFilter] = useState<IssueLevel[]>([]);
  const [confirmStatusFilter, setConfirmStatusFilter] = useState<
    ConfirmStatus | "all"
  >("all");
  const [searchKeyword, setSearchKeyword] = useState("");

  const toggleSelectIssue = (id: string) => {
    setSelectedIds((prev) =>
      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
    );
  };

  const toggleLevelFilter = (level: IssueLevel) => {
    setLevelFilter((prev) =>
      prev.includes(level) ? prev.filter((l) => l !== level) : [...prev, level]
    );
  };

  const filteredIssues = MOCK_ISSUES.filter((issue) => {
    if (levelFilter.length > 0 && !levelFilter.includes(issue.level))
      return false;
    if (
      confirmStatusFilter !== "all" &&
      issue.confirmStatus !== confirmStatusFilter
    )
      return false;
    if (!searchKeyword.trim()) return true;
    const kw = searchKeyword.trim().toLowerCase();
    return (
      issue.description.toLowerCase().includes(kw) ||
      issue.filePath.toLowerCase().includes(kw) ||
      issue.ruleName.toLowerCase().includes(kw) ||
      (issue.apiName ?? "").toLowerCase().includes(kw)
    );
  });

  return (
    <div className="min-h-screen bg-[#F5F5F7] text-slate-900">
      <div className="relative flex min-h-screen">
        {/* 左侧 Sidebar（浅色版） */}
        <aside className="hidden w-64 flex-col border-r border-slate-200/80 bg-white/90 backdrop-blur md:flex">
          <div className="flex items-center gap-2 px-6 py-4 border-b border-slate-100">
            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-slate-900 text-xs font-bold text-white">
              QK
            </div>
            <div>
              <div className="text-sm font-semibold tracking-tight">
                质量看板系统
              </div>
              <div className="text-xs text-slate-500">Code Quality Board</div>
            </div>
          </div>
          <div className="mt-3 px-4 text-[11px] font-medium uppercase tracking-wide text-slate-400">
            Scan Tasks
          </div>
          <nav className="mt-2 space-y-1 px-2">
            <button className="flex w-full items-center justify-between rounded-xl bg-slate-900/5 px-3 py-2 text-sm text-slate-900 shadow-inner">
              <span>鸿蒙仓颉 API 设计规范</span>
              <span className="h-2 w-2 rounded-full bg-emerald-500" />
            </button>
            <button className="flex w-full items-center justify-between rounded-xl px-3 py-2 text-sm text-slate-600 hover:bg-slate-100">
              <span>arkTS 接口一致性校验</span>
            </button>
            <button className="flex w-full items-center justify-between rounded-xl px-3 py-2 text-sm text-slate-600 hover:bg-slate-100">
              <span>cjd 源码一致性扫描</span>
            </button>
          </nav>
        </aside>

        {/* 右侧主内容 */}
        <main className="flex-1">
          {/* 顶部导航（浅色） */}
          <header className="sticky top-0 z-20 border-b border-slate-200/80 bg-white/90 backdrop-blur">
            <div className="flex items-center justify-between px-6 py-3">
              <div className="flex items-center gap-2 text-xs text-slate-500">
                <span>质量看板</span>
                <span>/</span>
                <span>鸿蒙仓颉 API 设计规范</span>
                <span>/</span>
                <span className="text-slate-800">扫描结果详情</span>
              </div>
              <div className="flex items-center gap-3 text-xs text-slate-600">
                <button className="rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium hover:bg-slate-50">
                  浅色
                </button>
                <div className="flex items-center gap-2 rounded-full border border-slate-200 bg-white px-2 py-1">
                  <div className="h-6 w-6 rounded-full bg-slate-300" />
                  <span>管理员 · Alex</span>
                </div>
              </div>
            </div>
          </header>

          {/* 内容区 */}
          <div className="mx-auto flex max-w-7xl gap-5 px-4 py-6 lg:px-8">
            <div className="flex-1 space-y-4">
              {/* 概要卡片 */}
              <GlassCard className="p-5">
                <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
                  {/* 左侧主信息 */}
                  <div className="space-y-2">
                    <div className="inline-flex items-center gap-2 rounded-full bg-emerald-50 px-2 py-1 text-xs text-emerald-600">
                      <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
                      扫描成功
                    </div>
                    <div className="text-lg font-semibold tracking-tight">
                      鸿蒙仓颉 API 设计规范扫描
                    </div>
                    <div className="text-sm text-slate-500">
                      2024-04-01 13:28 · master 分支
                    </div>
                    <div className="text-xs text-slate-400">
                      扫描记录 ID:{" "}
                      <span className="font-mono">SR-20240401-0001</span>
                    </div>
                    <div className="text-xs text-slate-400">
                      创建人：张三（zhangsan）
                    </div>
                  </div>

                  {/* 中间统计 */}
                  <div className="grid grid-cols-2 gap-3 text-xs md:grid-cols-3">
                    <GlassCard className="p-3 text-xs bg-white">
                      <div className="text-slate-500">问题总数</div>
                      <div className="mt-1 text-xl font-semibold text-slate-900">
                        128
                      </div>
                    </GlassCard>
                    <GlassCard className="p-3 text-xs bg-white">
                      <div className="text-slate-500">严重 / 警告 / 提示</div>
                      <div className="mt-1 flex items-baseline gap-2 text-sm">
                        <span className="text-red-600">12</span>
                        <span className="text-amber-600">40</span>
                        <span className="text-sky-600">76</span>
                      </div>
                    </GlassCard>
                    <GlassCard className="p-3 text-xs bg-white">
                      <div className="text-slate-500">已确认 / 未确认</div>
                      <div className="mt-1 flex items-baseline gap-2 text-sm">
                        <span className="text-emerald-600">80</span>
                        <span className="text-slate-600">48</span>
                      </div>
                    </GlassCard>
                    <GlassCard className="p-3 text-xs bg-white">
                      <div className="text-slate-500">耗时</div>
                      <div className="mt-1 text-xl font-semibold text-slate-900">
                        2 分 35 秒
                      </div>
                    </GlassCard>
                    <GlassCard className="p-3 text-xs bg-white">
                      <div className="text-slate-500">扩展信息</div>
                      <div className="mt-1 text-[11px] leading-relaxed text-slate-600">
                        规则版本：v1.2
                        <br />
                        扫描范围：/src/api/**
                      </div>
                    </GlassCard>
                  </div>

                  {/* 右侧操作 */}
                  <div className="flex flex-col items-stretch justify-between gap-2 md:items-end">
                    <button className="inline-flex items-center justify-center rounded-full bg-slate-900 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-slate-800">
                      重新扫描
                    </button>
                    <button className="inline-flex items-center justify-center rounded-full border border-slate-300 bg-white px-4 py-2 text-xs font-medium text-slate-800 hover:bg-slate-50">
                      导出结果
                    </button>
                    <button className="inline-flex items-center justify-center text-[11px] text-slate-400 hover:text-slate-700">
                      查看审计日志
                    </button>
                  </div>
                </div>
              </GlassCard>

              {/* 筛选条 */}
              <GlassCard className="flex flex-col gap-3 p-3 text-xs md:flex-row md:items-center md:justify-between">
                <div className="flex flex-wrap items-center gap-2">
                  <span className="text-[11px] text-slate-500">问题级别：</span>
                  {(["critical", "warning", "info"] as IssueLevel[]).map(
                    (level) => {
                      const active = levelFilter.includes(level);
                      const cfg = levelConfig[level];
                      return (
                        <button
                          key={level}
                          onClick={() => toggleLevelFilter(level)}
                          className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] transition ${
                            active
                              ? cfg.badgeClass
                              : "bg-white text-slate-600 border border-slate-200 hover:bg-slate-50"
                          }`}
                        >
                          <span
                            className={`h-1.5 w-1.5 rounded-full ${cfg.dotClass}`}
                          />
                          {cfg.label}
                        </button>
                      );
                    }
                  )}
                  <span className="ml-3 text-[11px] text-slate-500">
                    确认状态：
                  </span>
                  <select
                    className="h-7 rounded-full border border-slate-300 bg-white px-2 text-[11px] text-slate-700 outline-none"
                    value={confirmStatusFilter}
                    onChange={(e) =>
                      setConfirmStatusFilter(e.target.value as any)
                    }
                  >
                    <option value="all">全部</option>
                    <option value="unconfirmed">未确认</option>
                    <option value="confirmed">已确认</option>
                  </select>
                </div>
                <div className="flex items-center gap-2">
                  <div className="flex items-center gap-2 rounded-full border border-slate-300 bg-white px-2 py-1">
                    <span className="text-[11px] text-slate-500">搜索：</span>
                    <input
                      value={searchKeyword}
                      onChange={(e) => setSearchKeyword(e.target.value)}
                      className="w-40 bg-transparent text-xs text-slate-800 placeholder:text-slate-400 focus:outline-none"
                      placeholder="描述 / 文件路径 / 规则..."
                    />
                  </div>
                  <button
                    className="rounded-full px-3 py-1 text-[11px] text-slate-500 hover:bg-slate-100"
                    onClick={() => {
                      setLevelFilter([]);
                      setConfirmStatusFilter("all");
                      setSearchKeyword("");
                    }}
                  >
                    重置筛选
                  </button>
                </div>
              </GlassCard>

              {/* 问题列表 */}
              <GlassCard className="overflow-hidden text-xs">
                <div className="flex items-center justify-between border-b border-slate-200 px-4 py-2 text-[11px] text-slate-500">
                  <span>问题列表 · 共 {filteredIssues.length} 条</span>
                  <button className="rounded-full px-2 py-1 hover:bg-slate-100">
                    列显示配置
                  </button>
                </div>
                <div className="max-h-[460px] overflow-auto">
                  <table className="min-w-full border-separate border-spacing-0 text-left">
                    <thead className="sticky top-0 bg-slate-50 backdrop-blur">
                      <tr className="text-[11px] uppercase tracking-wide text-slate-500">
                        <th className="w-8 border-b border-slate-200 px-3 py-2">
                          <input
                            type="checkbox"
                            className="h-3 w-3 rounded border-slate-400"
                            onChange={(e) => {
                              if (e.target.checked) {
                                setSelectedIds(filteredIssues.map((i) => i.id));
                              } else {
                                setSelectedIds([]);
                              }
                            }}
                            checked={
                              selectedIds.length > 0 &&
                              selectedIds.length === filteredIssues.length
                            }
                          />
                        </th>
                        <th className="border-b border-slate-200 px-3 py-2">
                          级别
                        </th>
                        <th className="border-b border-slate-200 px-3 py-2">
                          规则名称
                        </th>
                        <th className="border-b border-slate-200 px-3 py-2">
                          文件路径
                        </th>
                        <th className="border-b border-slate-200 px-3 py-2">
                          行号
                        </th>
                        <th className="border-b border-slate-200 px-3 py-2">
                          问题描述
                        </th>
                        <th className="border-b border-slate-200 px-3 py-2">
                          确认状态
                        </th>
                        <th className="border-b border-slate-200 px-3 py-2">
                          继承
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      {filteredIssues.map((issue, idx) => {
                        const cfg = levelConfig[issue.level];
                        const last = idx === filteredIssues.length - 1;
                        const isSelected = selectedIds.includes(issue.id);
                        const confirmBadge =
                          issue.confirmStatus === "unconfirmed"
                            ? null
                            : issue.confirmType
                            ? {
                                label: confirmTypeLabel[issue.confirmType],
                                className:
                                  confirmTypeTagClass[issue.confirmType],
                              }
                            : null;
                        return (
                          <tr
                            key={issue.id}
                            className={`cursor-pointer transition hover:bg-slate-50 ${
                              isSelected ? "bg-slate-50" : ""
                            }`}
                            onClick={() => {
                              setSelectedIssue(issue);
                              setDrawerOpen(true);
                            }}
                          >
                            <td
                              className={`border-b border-slate-100 px-3 py-2 ${
                                last ? "border-none" : ""
                              }`}
                              onClick={(e) => e.stopPropagation()}
                            >
                              <input
                                type="checkbox"
                                className="h-3 w-3 rounded border-slate-400"
                                checked={isSelected}
                                onChange={() => toggleSelectIssue(issue.id)}
                              />
                            </td>
                            <td
                              className={`border-b border-slate-100 px-3 py-2 ${
                                last ? "border-none" : ""
                              }`}
                            >
                              <span
                                className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] ${cfg.badgeClass}`}
                              >
                                <span
                                  className={`h-1.5 w-1.5 rounded-full ${cfg.dotClass}`}
                                />
                                {cfg.label}
                              </span>
                            </td>
                            <td
                              className={`border-b border-slate-100 px-3 py-2 ${
                                last ? "border-none" : ""
                              }`}
                            >
                              {issue.ruleName}
                            </td>
                            <td
                              className={`border-b border-slate-100 px-3 py-2 font-mono text-[11px] text-slate-500 ${
                                last ? "border-none" : ""
                              }`}
                            >
                              <span className="max-w-[220px] truncate">
                                {issue.filePath}
                              </span>
                            </td>
                            <td
                              className={`border-b border-slate-100 px-3 py-2 font-mono text-[11px] text-slate-500 ${
                                last ? "border-none" : ""
                              }`}
                            >
                              {issue.line}
                            </td>
                            <td
                              className={`border-b border-slate-100 px-3 py-2 text-[11px] text-slate-700 ${
                                last ? "border-none" : ""
                              }`}
                            >
                              <span className="line-clamp-2">
                                {issue.description}
                              </span>
                            </td>
                            <td
                              className={`border-b border-slate-100 px-3 py-2 ${
                                last ? "border-none" : ""
                              }`}
                            >
                              {issue.confirmStatus === "unconfirmed" ? (
                                <span className="rounded-full bg-slate-50 px-2 py-0.5 text-[11px] text-slate-600 border border-slate-200">
                                  未确认
                                </span>
                              ) : confirmBadge ? (
                                <span
                                  className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] ${confirmBadge.className}`}
                                >
                                  已确认 · {confirmBadge.label}
                                </span>
                              ) : (
                                <span className="rounded-full bg-slate-50 px-2 py-0.5 text-[11px] text-slate-600 border border-slate-200">
                                  已确认
                                </span>
                              )}
                            </td>
                            <td
                              className={`border-b border-slate-100 px-3 py-2 ${
                                last ? "border-none" : ""
                              }`}
                            >
                              {issue.inheritedFrom ? (
                                <span className="inline-flex items-center gap-1 rounded-full bg-purple-50 px-2 py-0.5 text-[11px] text-purple-600 ring-1 ring-purple-200">
                                  <span className="h-1.5 w-1.5 rounded-full bg-purple-500" />
                                  继承
                                </span>
                              ) : (
                                <span className="text-[11px] text-slate-400">
                                  -
                                </span>
                              )}
                            </td>
                          </tr>
                        );
                      })}
                    </tbody>
                  </table>
                </div>

                {/* 分页条（demo） */}
                <div className="flex items-center justify-between border-t border-slate-200 px-4 py-2 text-[11px] text-slate-500">
                  <span>共 {filteredIssues.length} 条 · 第 1/1 页</span>
                  <div className="flex items-center gap-2">
                    <button className="rounded-full px-2 py-1 hover:bg-slate-100">
                      上一页
                    </button>
                    <button className="rounded-full px-2 py-1 hover:bg-slate-100">
                      下一页
                    </button>
                  </div>
                </div>
              </GlassCard>

              {/* 批量操作条 */}
              {selectedIds.length > 0 && (
                <div className="sticky bottom-4 z-10 flex justify-center">
                  <GlassCard className="flex items-center gap-3 rounded-full bg-white px-4 py-2 text-[11px]">
                    <span className="text-slate-600">
                      已选择 {selectedIds.length} 条问题
                    </span>
                    <select className="h-7 rounded-full border border-slate-300 bg-white px-2 text-[11px] text-slate-700 outline-none">
                      <option>选择确认类型</option>
                      <option value="problem">确认为问题</option>
                      <option value="falsePositive">确认为误报</option>
                      <option value="fixed">确认为已修复</option>
                      <option value="known">确认为已知问题</option>
                    </select>
                    <input
                      className="w-52 rounded-full border border-slate-300 bg-white px-3 py-1 text-[11px] text-slate-700 outline-none"
                      placeholder="备注（批量应用）"
                    />
                    <button className="rounded-full bg-slate-900 px-3 py-1 text-[11px] font-semibold text-white hover:bg-slate-800">
                      批量确认
                    </button>
                  </GlassCard>
                </div>
              )}
            </div>

            {/* 右侧问题详情 Drawer（结构同深色版） */}
            {drawerOpen && selectedIssue && (
              <GlassCard className="hidden h-[calc(100vh-90px)] w-[360px] flex-shrink-0 flex-col overflow-hidden border-l border-slate-200 bg-white md:flex">
                <div className="flex items-start justify-between border-b border-slate-200 px-4 py-3">
                  <div className="space-y-1">
                    <div className="flex items-center gap-2">
                      <span
                        className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] ${
                          levelConfig[selectedIssue.level].badgeClass
                        }`}
                      >
                        <span
                          className={`h-1.5 w-1.5 rounded-full ${
                            levelConfig[selectedIssue.level].dotClass
                          }`}
                        />
                        {levelConfig[selectedIssue.level].label}
                      </span>
                      <span className="text-xs text-slate-800">
                        {selectedIssue.ruleName}
                      </span>
                    </div>
                    <div className="font-mono text-[11px] text-slate-500">
                      {selectedIssue.filePath} : {selectedIssue.line}
                    </div>
                    <div className="font-mono text-[11px] text-slate-400">
                      问题 ID: {selectedIssue.id}
                    </div>
                  </div>
                  <button
                    className="rounded-full p-1 text-slate-500 hover:bg-slate-100 hover:text-slate-800"
                    onClick={() => setDrawerOpen(false)}
                  >
                    ✕
                  </button>
                </div>

                <div className="flex-1 space-y-3 overflow-auto px-4 py-3 text-xs">
                  {/* 一、问题详情 */}
                  <section>
                    <div className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                      问题详情
                    </div>
                    <div className="space-y-1 text-[11px] text-slate-800">
                      <div className="flex justify-between">
                        <span className="text-slate-500">当前确认状态</span>
                        <span>
                          {selectedIssue.confirmStatus === "unconfirmed" ? (
                            <span className="rounded-full bg-slate-50 px-2 py-0.5 text-[11px] text-slate-600 border border-slate-200">
                              未确认
                            </span>
                          ) : selectedIssue.confirmType ? (
                            <span
                              className={`rounded-full px-2 py-0.5 text-[11px] ${
                                confirmTypeTagClass[selectedIssue.confirmType]
                              }`}
                            >
                              已确认 ·{" "}
                              {confirmTypeLabel[selectedIssue.confirmType]}
                            </span>
                          ) : (
                            "已确认"
                          )}
                        </span>
                      </div>
                      {selectedIssue.apiName && (
                        <div className="flex justify-between">
                          <span className="text-slate-500">API 名称</span>
                          <span className="truncate pl-4 text-right">
                            {selectedIssue.apiName}
                          </span>
                        </div>
                      )}
                      {selectedIssue.interfaceType && (
                        <div className="flex justify-between">
                          <span className="text-slate-500">接口类型</span>
                          <span className="pl-4 text-right">
                            {selectedIssue.interfaceType}
                          </span>
                        </div>
                      )}
                      {selectedIssue.mismatchType && (
                        <div className="flex justify-between">
                          <span className="text-slate-500">不一致类型</span>
                          <span className="pl-4 text-right">
                            {selectedIssue.mismatchType}
                          </span>
                        </div>
                      )}
                    </div>
                  </section>

                  {/* 二、问题描述 */}
                  <section>
                    <div className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                      问题描述
                    </div>
                    <div className="rounded-xl bg-slate-50 px-3 py-2 text-[11px] leading-relaxed text-slate-800">
                      {selectedIssue.description}
                      {selectedIssue.suggestion && (
                        <div className="mt-2 border-t border-dashed border-slate-200 pt-2 text-[11px] text-slate-700">
                          <span className="font-semibold text-slate-800">
                            建议修复方案：
                          </span>{" "}
                          {selectedIssue.suggestion}
                        </div>
                      )}
                    </div>
                  </section>

                  {/* 三、代码片段 */}
                  {selectedIssue.codeSnippet && (
                    <section>
                      <div className="mb-1 flex items-center justify-between">
                        <span className="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                          相关代码片段
                        </span>
                        <button className="text-[11px] text-sky-600 hover:text-sky-700">
                          复制代码
                        </button>
                      </div>
                      <div className="overflow-hidden rounded-xl border border-slate-200 bg-slate-50">
                        <pre className="max-h-40 overflow-auto px-3 py-2 text-[11px] leading-relaxed text-slate-800">
                          <code>{selectedIssue.codeSnippet}</code>
                        </pre>
                      </div>
                    </section>
                  )}

                  {/* 四、确认操作 */}
                  <section>
                    <div className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                      确认此问题
                    </div>
                    <div className="space-y-2 rounded-xl border border-slate-200 bg-slate-50 p-3">
                      <div className="space-y-1">
                        <span className="text-[11px] text-slate-700">
                          确认类型
                        </span>
                        <select className="w-full rounded-lg border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-800 outline-none">
                          <option value="">请选择确认类型</option>
                          <option value="problem">确认为问题</option>
                          <option value="falsePositive">确认为误报</option>
                          <option value="fixed">确认为已修复</option>
                          <option value="known">确认为已知问题</option>
                        </select>
                      </div>
                      <div className="space-y-1">
                        <span className="text-[11px] text-slate-700">
                          备注说明
                        </span>
                        <textarea
                          rows={3}
                          className="w-full resize-none rounded-lg border border-slate-300 bg-white px-2 py-1 text-[11px] text-slate-800 outline-none placeholder:text-slate-400"
                          placeholder="例如：明确原因、影响范围、是否已安排修复计划等..."
                        />
                        <div className="text-[10px] text-slate-400">
                          最多 200 字
                        </div>
                      </div>
                      <div className="flex items-center justify-between pt-1">
                        <div className="flex items-center gap-2 text-[10px] text-slate-400">
                          <span>最近操作：</span>
                          <span>2024-04-01 15:20 · 张三</span>
                        </div>
                        <div className="flex items-center gap-2">
                          <button className="rounded-full border border-slate-300 px-3 py-1 text-[11px] text-slate-700 hover:bg-white">
                            撤销确认
                          </button>
                          <button className="rounded-full bg-slate-900 px-3 py-1 text-[11px] font-semibold text-white hover:bg-slate-800">
                            提交确认
                          </button>
                        </div>
                      </div>
                    </div>
                  </section>

                  {/* 五、确认历史 */}
                  <section>
                    <div className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                      确认历史
                    </div>
                    <div className="space-y-2">
                      {selectedIssue.confirmHistory.length === 0 && (
                        <div className="rounded-xl bg-slate-50 px-3 py-2 text-[11px] text-slate-400">
                          暂无确认历史。
                        </div>
                      )}
                      {selectedIssue.confirmHistory.map((record, idx) => (
                        <div key={idx} className="flex gap-2">
                          <div className="flex flex-col items-center">
                            <div className="h-2 w-2 rounded-full bg-sky-500" />
                            {idx !==
                              selectedIssue.confirmHistory.length - 1 && (
                              <div className="h-full w-px flex-1 bg-slate-200" />
                            )}
                          </div>
                          <div className="flex-1 rounded-lg bg-slate-50 px-3 py-2">
                            <div className="flex items-center justify-between text-[11px] text-slate-700">
                              <span>
                                {record.time} · {record.user}
                              </span>
                              <span className="text-sky-600">
                                {record.action === "confirm"
                                  ? "确认"
                                  : record.action === "modify"
                                  ? "修改"
                                  : "撤销"}
                              </span>
                            </div>
                            {record.type && (
                              <div className="mt-1 text-[11px] text-slate-800">
                                确认类型： {confirmTypeLabel[record.type]}
                              </div>
                            )}
                            {record.fromType && record.toType && (
                              <div className="mt-1 text-[11px] text-slate-800">
                                类型变更： {confirmTypeLabel[record.fromType]} →{" "}
                                {confirmTypeLabel[record.toType]}
                              </div>
                            )}
                            {record.comment && (
                              <div className="mt-1 text-[11px] text-slate-700">
                                备注：{record.comment}
                              </div>
                            )}
                          </div>
                        </div>
                      ))}
                    </div>
                  </section>

                  {/* 六、继承信息 */}
                  {selectedIssue.inheritedFrom && (
                    <section>
                      <div className="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                        版本继承
                      </div>
                      <div className="space-y-2 rounded-xl border border-purple-200 bg-purple-50 p-3 text-[11px] text-purple-800">
                        <div className="flex items-center gap-2">
                          <span className="h-5 w-5 rounded-full bg-purple-500 text-center text-[11px] leading-5 text-white">
                            ⛓
                          </span>
                          <span>
                            当前问题继承自：
                            {selectedIssue.inheritedFrom.time} ·{" "}
                            {selectedIssue.inheritedFrom.branch} · 扫描记录{" "}
                            {selectedIssue.inheritedFrom.scanId}
                          </span>
                        </div>
                        <button className="rounded-full bg-purple-600 px-3 py-1 text-[11px] font-semibold text-white hover:bg-purple-500">
                          查看历史版本问题
                        </button>
                      </div>
                    </section>
                  )}
                </div>
              </GlassCard>
            )}
          </div>
        </main>
      </div>
    </div>
  );
};

export default ScanResultDetailPage;
